<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>应用延迟详情</title>
  <#include '/inc/frontResources.html'>
</head>

<body class="hold-transition sidebar-mini layout-navbar-fixed">
  <div class="wrapper">
    <!-- Header End -->
    <#include "/inc/head.html">
    <div class="content-wrapper ml-0">
      <div class="content">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">
              应用：<label class="label label-success">${appId!}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              查询时间：<label class="label label-success">${searchTime!}</label>
            </h3>
          </div>
          <div class="card-body table-responsive">
            <table class="table table-striped table-hover">
              <thead>
              <tr>
                <th scope="col">序号</th>
                <th scope="col">实例信息</th>
                <th scope="col">延迟个数</th>
              </tr>
              </thead>
              <tbody>
              <#list sumInstanceLatencyStatMap?keys as key>
                <tr>
                  <td>${key_index + 1}</td>
                  <td><a href="#${key!}">${key!}</a></td>
                  <td>${sumInstanceLatencyStatMap[key]}</td>
                </tr>
              </#list>
              </tbody>
            </table>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <#list latencyInfoDetailMap?keys as key>
              <div style="margin-top: 20px">
                <div class="page-header" id="${key!}">
                  <#assign instanceId = (latencyInfoDetailMap[key])[0].instance_id>
                  <h5>
                    <li><a href="${request.contextPath}/admin/instance/index?instanceId=${instanceId!}"
                           target="_blank">${key!}</a>
                    </li>
                  </h5>
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-hover">
                    <thead>
                      <tr>
                        <th scope="col">序号</th>
                        <th scope="col">事件名称</th>
                        <th scope="col">延迟时间点</th>
                        <th scope="col">延迟耗时(单位：毫秒)</th>
                        <th scope="col">关联慢查询</th>
                      </tr>
                    </thead>
                    <tbody>
                      <#list latencyInfoDetailMap[key] as latencyInfoDetail>
                        <tr>
                          <td>${latencyInfoDetail_index + 1}</td>
                          <td>${latencyInfoDetail.event!}</td>
                          <td>${latencyInfoDetail.execute_date!}</td>
                          <td>${latencyInfoDetail.execution_cost!}</td>
                          <td>
                            <button type="button" class="btn btn-success" data-bs-target="#slowlog-modal"
                                    data-bs-toggle="modal"
                                    data-instanceid="${latencyInfoDetail.instance_id!}"
                                    data-executedate="${latencyInfoDetail.execute_date!}">
                              查看关联慢查询
                            </button>
                          </td>
                        </tr>
                      </#list>
                    </tbody>
                  </table>
                </div>
              </div>
            </#list>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="slowlog-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog" style="width: 100%">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">关联慢查询</h4>
          <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true"></button>
        </div>

        <form class="form-horizontal form-bordered form-row-stripped">
          <div class="modal-body">
            <div class="row">
              <!-- 控件开始 -->
              <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                  <thead>
                  <tr>
                    <td>实例id</td>
                    <td>redis实例</td>
                    <td>慢查询id</td>
                    <td>耗时(单位:微秒)</td>
                    <td>命令</td>
                    <td>发生时间</td>
                  </tr>
                  </thead>
                  <tbody id="slowlogTable"></tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" data-bs-dismiss="modal" class="btn">Close</button>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>
</html>

<script type="text/javascript">
  $('#slowlog-modal').on('shown.bs.modal', function (e) {
    var instanceId = $(e.relatedTarget).data('instanceid');
    var executeDate = $(e.relatedTarget).data('executedate');

    console.log(instanceId + ' ' + executeDate);
    $('#slowlogTable').html('');
    $.get(
            '${request.contextPath}/admin/app/latencyRelatedSlowLog.json',
            {
              instanceId: instanceId,
              executeDate: executeDate
            },
            function (data) {
              var instanceSlowLogList = data.instanceSlowLogList;

              instanceSlowLogList.forEach(function (slowlog, index) {
                var instanceId = slowlog.instanceId;
                var instance = slowlog.ip + ":" + slowlog.port;
                var slowLogId = slowlog.slowLogId;
                var command = slowlog.command;
                var costTime = slowlog.costTime;
                var executeTime = slowlog.executeTime;

                let date = new Date(executeTime)
                var formatExecuteTime = dateFormat("YYYY-mm-dd HH:MM:SS", date)

                $('#slowlogTable').append(
                        '<tr>' +
                        '<td>' + instanceId + '</td>' +
                        '<td>' + instance + '</td>' +
                        '<td>' + slowLogId + '</td>' +
                        '<td>' + costTime + '</td>' +
                        '<td>' + command + '</td>' +
                        '<td>' + formatExecuteTime + '</td>' +
                        '</tr>'
                );
              })
            }
    );

  });


  function dateFormat(fmt, date) {
    let ret;
    const opt = {
      "Y+": date.getFullYear().toString(),        // 年
      "m+": (date.getMonth() + 1).toString(),     // 月
      "d+": date.getDate().toString(),            // 日
      "H+": date.getHours().toString(),           // 时
      "M+": date.getMinutes().toString(),         // 分
      "S+": date.getSeconds().toString()          // 秒
    };
    for (let k in opt) {
      ret = new RegExp("(" + k + ")").exec(fmt);
      if (ret) {
        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
      }
      ;
    }
    ;
    return fmt;
  }

</script>